<template>
  <div class="channel-data">
    <el-tabs v-model="activeName" @tab-click="handleClick()" type="border-card">
      <el-tab-pane label="徽章数据" name="first">
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          :showSelect="true"
          :options="allBadgeCateory"
          v-model="modelVal"
        ></statistics-data>
        <el-table
          v-if="workType"
          :data="badgeTableData"
          border
          stripe
          style="width: 100%"
          ref="sadasdas"
        >
          <el-table-column
            v-for="(item, i) in badgeTableDataHeader"
            :key="i"
            :label="item"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row[i] }}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import StatisticsData from "@/components/StatisticsData";
export default {
  components: {
    StatisticsData,
  },
  data() {
    return {
      activeName: "first",
      coreData: {},
      xAxis: [],
      yAxis: [],
      series: [],
      legend: [],
      flag: false,
      tableLoadData: [],
      tableHeadConfig: [],
      modelVal: "",
      // 获取所有的徽章品类
      allBadgeCateory: [{ value: "", label: "全部" }],
      // 这里的表格公共的用不了，自己写一个
      badgeTableData: [],
      // 表头
      badgeTableDataHeader: [],
      workType: "",
    };
  },
  watch: {
    modelVal(newval) {
      var startTime = newval.dataVal[0];
      var endTime = newval.dataVal[1];
      this.workType = newval.workType;
      // 如果是用自己的表格的话,就把公共的删掉
      let s_node = document.querySelector(".table-data .el-table");
      if (this.workType) {
        // 这里直接删除节点的话切换回全部就不会出现这个table了
        // let f_node = document.querySelector('.table-data')
        // let s_node = document.querySelector('.table-data .el-table')
        // s_node&&f_node.removeChild(s_node)
        s_node.style.display = "none";
      } else {
        s_node.style.display = "block";
      }
      this.handleClick(startTime, endTime, this.workType);
    },
  },
  mounted() {
    this.getBadgeCateory();
  },
  methods: {
    // 获取所有的徽章品类
    getBadgeCateory() {
      this.$service.BadgeList({ page: 1, size: 100 }).then((res) => {
        let arr = [];
        arr = res.rows;
        // 自己动手把拿到的数据封装一下value,label形式
        arr.forEach((item) => {
          this.allBadgeCateory.push({ value: item.id, label: item.title });
        });
      });
    },

    async handleClick(startTime, endTime, workType) {
      this.$cancel(); //未加载完的清除取消上次请求，只保留最后一次请求
      this.flag = false;
      this.tableLoadData = [];
      this.tableHeadConfig = [];
      this.legend = [];
      this.yAxis = [];
      this.xAxis = [];
      this.series = [];
      if (this.activeName == "first") {
        await this.$service.StatisBadgeCore().then((res) => {
          this.coreData.data = {};
          this.coreData.data = res;
        });
        let service = workType
          ? this.$service.StatisBadgeLevelChart
          : this.$service.StatisBadgeChart;
        service({
          startDate: startTime,
          endDate: endTime,
          badgeId: workType,
        })
          .then((res) => {
            this.badgeTableData = [];
            this.badgeTableDataHeader = [];
            // 选择了品类
            if (workType) {
              let Cnts = [];
              let arr = [];
              arr = JSON.parse(JSON.stringify(res.dayData));
              // 处理表格数据
              this.badgeTableData = res.dayData;
              this.badgeTableDataHeader = res.headData;
              this.badgeTableData.push(res.otherData);
              // 处理数据
              if (arr.length) {
                // 有数据的时候加进去
                arr.forEach((item) => {
                  this.xAxis.push(item[0]);
                });
                // 统计图的数据处理
                for (let i = 0; i < arr[0].length - 1; i++) {
                  let gg = [];
                  for (let j = 0; j < arr.length; j++) {
                    gg.push(Number(arr[j][i + 1]));
                  }
                  Cnts.push(gg);
                }
                // 没有的数据的时候加空数组进去防止给series报错
              } else {
                // 如果没有等级,就会报错,但是因为this.series里面什么都没有,但是现在不影响显示了
                for (let a = 0; a < res.headData.length - 1; a++) {
                  Cnts.push([]);
                }
              }
              this.legend = res.headData.slice(1);
              Cnts.map((cnt, index) => {
                var serie = {
                  name: res.headData[index + 1],
                  type: "line",
                  data: cnt,
                  yAxisIndex: null,
                };
                var y = {
                  type: "value",
                  min: 0,
                  position: Cnts.length == index + 1 ? "right" : "left",
                };
                this.yAxis.push(y);
                this.series.push(serie);
              });
              // 没选品类
            } else {
              this.tableLoadData = [...res.dayData, ...res.otherData];
              this.tableHeadConfig = this.$ENUMS.badgeSl;
              this.legend = this.$ENUMS.badgeSlLegend;
              var Cnts = [[], [], []];
              res.dayData.map((item) => {
                this.xAxis.push(item.day);
                Cnts[0].push(item.badgeCnt);
                Cnts[1].push(item.badgeUserCnt);
                Cnts[2].push(item.badgeUserAvg);
              });
              Cnts.map((cnt, index) => {
                var serie = {
                  name: this.legend[index],
                  type: "line",
                  data: cnt,
                  yAxisIndex: index == 2 || index == 3 ? Cnts.length - 1 : null,
                };
                var y = {
                  type: "value",
                  min: 0,
                  position: Cnts.length == index + 1 ? "right" : "left",
                };
                this.yAxis.push(y);
                this.series.push(serie);
              });
            }
            this.flag = true;
          })
          .catch((err) => {});
      }
    },
  },
};
</script>
<style lang="less" scoped>
.channel-data {
  text-align: left;
}
</style>
